<!-- 
@name: 首页
-->
<template>
	<div id="couponDetail" class="page">
		<!--pages/commodityDetails/commodityDetails.vml-->
		<van-skeleton title :row="3" :loading="!detailData.pkey">
			<div style='margin-bottom:100rpx;'>
				<div style='height: 7.5rem;' class="swipeWrap">
					<div v-if="detailData.showType&&detailData.showType.indexOf('显示购买信息') !=-1&&detailData.lastPayMemberList" class="flex-row flex-alignCenter user">
						<img class='head' :src="detailData.lastPayMemberList[0].photo?detailData.lastPayMemberList[0].photo:require('@/assets/images/no-pic.jpg')"></img>
						<div style="margin:0 0.1rem">{{detailData.lastPayMemberList[0].name}}</div>
						<div>刚刚购买了本商品</div>
					</div>
					<div class="like" v-if="detailData.priceStatus!='NONE'&&detailData.showType&&detailData.showType.indexOf('显示浏览量') !=-1">
						<div>{{detailData.viewCount}}人喜欢</div>
					</div>
					<van-swipe autoplay="5000" indicator-color="white">
						<van-swipe-item v-for="(item,index) in detailData.photo" :key="index">
							<img class='bannerImg' :src="item?item:require('@/assets/images/no-pic.jpg')"></img>
						</van-swipe-item>
					</van-swipe>
				</div>
				<!-- 价格栏目 原-->
				<!-- <div class="priceWrap" v-if="detailData.priceStatus !='EXPIRED'">
					<img class='priceImg' src="@/assets/images/djs.png"></img>
					<div class="text flex-alignCenter flex-between">
						<div class="flex-column">
							<div class="text2">{{detailData.price}}</div>
							<div class="vipSuctract flex-row" v-if="detailData.vipDiscount">
								<div class="left">会员</div>
								<div class="right">立减{{detailData.vipDiscount}}元</div>
							</div>
						</div>
						<div class="text2" v-if="detailData.priceStatus =='NONE'"></div>
						<div class="text2" v-if="detailData.priceStatus =='PANIC_BUYING'">
							<div class="text3">距结束还剩</div>
							<van-count-down :time="time">
								<template #default="timeData">
									<span class="colon">{{ timeData.days }}天</span>
									<span class="block">{{ timeData.hours }}</span>
									<span class="colon">:</span>
									<span class="block">{{ timeData.minutes }}</span>
									<span class="colon">:</span>
									<span class="block">{{ timeData.seconds }}</span>
								</template>
							</van-count-down>
						</div>
						<div class="text2" v-if="detailData.priceStatus =='SOLD_OUT'">已被抢完</div>

					</div>
				</div>

				<div class="priceWrap2" v-if="detailData.priceStatus=='EXPIRED'">
					<div class="text flex-alignCenter flex-between">
						<div class="text2">{{detailData.price}}</div>
						<div class="text2" v-if="detailData.priceStatus =='PANIC_BUYING'">
							<div class="text3">结束时间</div>
							{{detailData.endDate}}
						</div>

					</div>
				</div> -->
				<!-- 价格栏目 原end -->
				<!-- 价格栏目 参考三门-->
				<div class="new_priceWrap" v-if="detailData.priceStatus !='EXPIRED' &&detailData.priceStatus !='NONE'&&detailData.showType&&detailData.showType.indexOf('显示倒计时') !=-1">
					<!-- <img class='priceImg' src="@/assets/images/djs.png"></img> -->
					<div class="text flex-alignCenter flex-between">
						<div class="priceBlock">
							<div class="flex-row flex-alignCenter">
								<div class="text2" v-if="detailData.priceAmt">
									<span style="font-size:0.24rem">￥</span>{{detailData.priceAmt}}
									<span style="font-size:0.24rem" v-if="!detailData.pricePv">起</span>
								</div>
								<div class="text2 flex-row flex-alignCenter" v-if="detailData.pricePv">
									<span style="margin:0 0.06rem" v-if="detailData.priceAmt&&detailData.pricePv">+</span>
									<img object-fit="fill" class="jf" src="@/assets/images/jf.png"></img>
									{{detailData.pricePv}}
									<span style="font-size:0.24rem;margin-left:0.02rem">起</span>
								</div>
							</div>
							<div class="vipSuctract2 flex-row" v-if="detailData.vipDiscount">
								会员立减{{detailData.vipDiscount}}元
							</div>
						</div>
						<div class="text2" v-if="detailData.priceStatus =='PANIC_BUYING'">
							<div class="text3">距结束还剩</div>
							<van-count-down :time="time">
								<template #default="timeData">
									<span class="colon">{{ timeData.days }}天</span>
									<span class="block">{{ timeData.hours }}</span>
									<span class="colon">:</span>
									<span class="block">{{ timeData.minutes }}</span>
									<span class="colon">:</span>
									<span class="block">{{ timeData.seconds }}</span>
								</template>
							</van-count-down>
						</div>
						<div class="text2" v-if="detailData.priceStatus =='SOLD_OUT'">已被抢完</div>

					</div>
				</div>

				<div class="new_priceWrap2" v-if="detailData.priceStatus=='EXPIRED'&&detailData.showType&&detailData.showType.indexOf('显示倒计时') !=-1">
					<div class="text flex-alignCenter flex-between">
						<div class="flex-row flex-alignCenter">
							<div class="text2" v-if="detailData.priceAmt">
								<span style="font-size:0.24rem">￥</span>{{detailData.priceAmt}}
							</div>
							<div class="text2 flex-row flex-alignCenter" v-if="detailData.pricePv">
								<span style="margin:0 0.06rem" v-if="detailData.priceAmt&&detailData.pricePv">+</span>
								<img object-fit="fill" class="jf" src="@/assets/images/jf.png"></img>
								{{detailData.pricePv}}
							</div>
						</div>
						<div class="text2">
							<div class="text3">结束时间</div>
							{{detailData.endDate}}
						</div>

					</div>
				</div>

				<!-- 价格栏目 参考三门end -->
				<div class="whiteWrap">
					<div class="new_priceWrap3 flex-between flex-alignCenter" v-if="detailData.priceStatus=='NONE'||(detailData.showType&&detailData.showType.indexOf('显示倒计时') ==-1)">
						<div class="priceBlock">
							<div class="flex-row flex-alignCenter">
								<div class="text2" v-if="detailData.priceAmt">
									<span style="font-size:0.24rem">￥</span>{{detailData.priceAmt}}
								</div>
								<div class="text2 flex-row flex-alignCenter" v-if="detailData.pricePv">
									<span style="margin:0 0.06rem" v-if="detailData.priceAmt&&detailData.pricePv">+</span>
									<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
									{{detailData.pricePv}}
								</div>
							</div>
							<!-- <div class="vipSuctract2 flex-row" v-if="detailData.vipDiscount">
								会员立减 &nbsp; &nbsp; {{detailData.vipDiscount}}元
							</div> -->
						</div>
						<div class="text1">
							<img object-fit="fill" class="h" src="@/assets/images/h2.png"></img>

							{{detailData.viewCount}}人喜欢
						</div>
					</div>
					<div class="productWrap">
						<!-- <div class="coupon flex-between flex-alignCenter">
							<div class="">300积分优惠券</div>
							<div class="flex-row flex-alignCenter">领取 <img class='right' src="@/assets/images/right.png"></img></div>
						</div> -->

						<div class="name">{{detailData.name}}</div>
						<span v-if="detailData.showType&&detailData.showType.indexOf('显示销量') !=-1" class="text2" style="margin-right:0.24rem">已售{{detailData.xsNum}}</span>
						<span v-if="detailData.showType&&detailData.showType.indexOf('显示库存') !=-1" class="text2">仅剩{{detailData.kcNum}}</span>
						<div class="flex-row" style="    margin-bottom: 0.16rem;margin-top: 0.22rem;">
							<div class="text3">随时退款</div>
							<div class="text3" v-if="detailData.goodsPaList.length == 1&&detailData.goodsPaList[0].payCount">限购{{detailData.goodsPaList[0].payCount}}件</div>
							<div class="text3">可转赠送</div>
						</div>
						<!-- <div class="flex-between flex-alignCenter">
							<div class="text1">有效期为购券之日起30天内</div>
							<div>
								<span class="text2" style="margin-right:0.24rem">已售{{detailData.xsNum}}</span>
								<span class="text2">仅剩{{detailData.kcNum}}</span>
							</div>
						</div> -->
					</div>
					<div class="vipTip flex-between flex-alignCenter" v-if="detailData.vipDiscount&&!$store.state.userinfo.isVip">
						<div class="flex-row flex-alignCenter">
							<!-- <div class="hy flex-row flex-alignCenter">
								<img object-fit="fill" style="width:0.2rem;height:0.2rem;margin-right:2px" src='@/assets/images/vip.png'></img>
								<div>会员</div>
							</div> -->
							<img object-fit="fill" style="width:0.94rem;height:0.42rem;margin-right:0.13rem" src="@/assets/images/hy.png"></img>

							<!-- <div>开通丰收季卡（三门农商银行存贷款用...</div> -->
							<div>成为会员可以享受优惠价格</div>
						</div>
						<div @click="$router.push('/coupon/vipContent')">去开通
							<van-icon name="arrow" />
						</div>
					</div>
					<div class="flex-between flex-alignCenter qun">
						<div class="flex-row">
							<img object-fit="fill" style="width:0.64rem;height:0.64rem;margin-right:0.16rem" src="@/assets/images/logo.jpg"></img>
							<div class="flex-column">
								<div class="text1">WaWa搭子粉丝福利群</div>
								<div class="text2">吃喝玩乐，还很实惠</div>
							</div>
						</div>
						<van-button class="button2 flex-center" @click="groupShow = true">点我添加</van-button>
						<van-overlay :show="groupShow" @click="groupShow = false">
							<div class="groupWrap" @click="groupShow = false">
								<div class="blockWrap">
									<img class='' :src="configData.serviceQrCode"></img>
								</div>
							</div>
						</van-overlay>
					</div>
				</div>
				<!-- 可选套餐 -->

				<div class='specification '>
					<div class="text1 flex-row flex-alignCenter">
						<!-- <van-icon color='#FF7260' size='0.34rem' name="todo-list" /> -->
						<img object-fit="fill" style="width:0.34rem;height:0.34rem;margin-right:0.14rem" src='@/assets/images/kxtc.png'></img>
						可选套餐
					</div>
					<div class="type1">
						<div class="item" v-for="(goodsItem,goodsIndex) in detailData.goodsPaList" :key="goodsIndex">
							<div class="text3">{{goodsItem.specification}}</div>
							<div class="flex-row">

								<div class="text5" v-if="goodsItem.payCount">累计限购{{goodsItem.payCount}}件</div>
								<div class="text5" v-if="goodsItem.orderPayCount">单笔限购{{goodsItem.orderPayCount}}件</div>
							</div>

							<div class=" flex-between">
								<div class="flex-row flex-alignCenter">
									<div class="text4" v-if="goodsItem.amtShow">
										<span style="font-size:0.24rem">￥</span>{{goodsItem.amtShow}}
									</div>
									<div class="text4 flex-row flex-alignCenter" v-if="goodsItem.pvShow">
										<span style="margin:0 0.06rem" v-if="goodsItem.amtShow&&goodsItem.pvShow">+</span>
										<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
										{{goodsItem.pvShow}}
									</div>
								</div>
								<van-button v-if="detailData.enabled&&detailData.priceStatus!='EXPIRED'" class="button" @click="goConfirmOrder($route.query.pkey,goodsItem.pkey,detailData,referrer)">立即购买</van-button>
							</div>
							<div class="vipSuctract flex-row" v-if="goodsItem.vipDiscount">
								<div class="left">会员</div>
								<div class="right">{{goodsItem.vipDiscount}}</div>
							</div>
							<div v-else></div>
						</div>
					</div>
				</div>

				<!-- 可选套餐 end -->
				<!-- 搭配商品 -->
				<div class='activity' style="min-height: auto;" v-if="detailData.recommendGoodsEntity">
					<div class="flex-row title flex-alignCenter">
						<img object-fit="fill" class="h" src="@/assets/images/h.png"></img>
						<div class="">为您搭配更优惠</div>
						<!-- <div class="text2">更多 ></div> -->
					</div>
					<div class="type2 ">
						<div class="item flex-row flex-alignCenter">
							<img object-fit="fill" @click="goCouponDetail(detailData.recommendGoodsEntity.pkey)" :src="detailData.recommendGoodsEntity.photo[0]"></img>
							<div style="flex:1">
								<div class="text1">{{detailData.recommendGoodsEntity.name}}</div>

								<!-- <div class="flex-row flex-alignCenter">
									<div class="text4">仅剩{{detailData.recommendGoodsEntity.kcNum}}</div>
									<div class="text4">已售{{detailData.recommendGoodsEntity.xsNum}}</div>
								</div> -->
								<div class="vipSuctract flex-row" v-if="detailData.recommendGoodsEntity.vipDiscount">
									<div class="left">会员</div>
									<div class="right">立减{{detailData.recommendGoodsEntity.vipDiscount}}元</div>
								</div>
								<div class="flex-between">
									<div class="flex-row flex-alignCenter">
										<div class="text2" v-if="detailData.recommendGoodsEntity.priceAmt">
											<span style="font-size:0.24rem">￥</span>{{detailData.recommendGoodsEntity.priceAmt}}
											<span class="minText2" v-if="!detailData.recommendGoodsEntity.pricePv">起</span>
										</div>
										<div class="text2 flex-row flex-alignCenter" v-if="detailData.recommendGoodsEntity.pricePv">
											<span style="margin:0 0.06rem" v-if="detailData.recommendGoodsEntity.priceAmt&&detailData.recommendGoodsEntity.pricePv">+</span>
											<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
											{{detailData.recommendGoodsEntity.pricePv}}
											<span class="minText">起</span>
										</div>
									</div>
									<van-button class="button" @click="goCouponDetail(detailData.recommendGoodsEntity.pkey,'',detailData.recommendGoodsEntity,referrer)">立即购买</van-button>
								</div>
							</div>

						</div>
					</div>
				</div>
				<!-- 搭配商品 end -->
				<!-- 推荐产品 -->

				<!-- <div class='activity'>
					<div class="flex-between">
						<div class="text1">推荐产品</div>
					</div>
					<div class="type1 flex-row">
						<div class="item" v-for="(goodsItem,goodsIndex) in bestGoods" :key="goodsIndex">
							<img object-fit="fill" @click="goCouponDetail(goodsItem.pkey)" :src="goodsItem.photo[0]"></img>
							<div class="text3">{{goodsItem.name}}</div>
							<div class="text4">
								<span v-if="goodsItem.price">{{goodsItem.price}}</span>
							</div>
						</div>
					</div>
				</div> -->

				<!-- 推荐产品 end -->
				<!-- 适用商户 -->
				<!-- <div class='whiteWrap'>
					<div class="vendorWrap">
						<div class="flex-between">
							<div class="text1">适用商户<span class="text2">({{queryVendorListTotal}})</span></div>
							<div class="text2" @click="$router.push({path:'/coupon/vendorList',query:{pkey:$route.query.pkey}})">
								<van-icon name="arrow" />
							</div>
						</div>
						<div class="flex-row" v-if="queryVendorList.pkey">
							<img @click="$router.push({path: '/vendor/detail',query: { pkey: queryVendorList.pkey },})" object-fit="fill" class="icon1" :src="queryVendorList.photo[0] || ''"></img>
							<div class="flex-column ">
								<div class="text3">{{queryVendorList.name}}</div>
								<div class="flex-row flex-alignCenter">
									<van-rate readonly v-model="queryVendorList.avgScore||0" allow-half :icon="$store.state.rateIcon" :void-icon="$store.state.rateIcon2" />
									<div style="color:#D95954;margin-left:0.1rem">{{queryVendorList.avgScore?queryVendorList.avgScore.toFixed(1):0}}</div>
								</div>
								<div class="flex-row flex-alignCenter">
									<van-icon name="location" color='#999999' />
									<div class="text4" style="margin-right:0.1rem">{{(queryVendorList.distance/1000).toFixed(1)}}km</div>
									<div class="text5">{{queryVendorList.addr}}</div>
								</div>
							</div>
							<div class="flex-row">
								<div @click="openLocation(queryVendorList)" class="flex-column flex-center" style="margin-right: 0.4rem;margin-left:0.5rem">
									<img object-fit="fill" class="icon2" src='@/assets/images/dh.png'></img>
									<div>导航</div>
								</div>
								<div class="flex-column flex-center" @click="handlePhone">
									<img object-fit="fill" class="icon3" src='@/assets/images/phone.png'></img>
									<div>电话</div>
								</div>
							</div>
						</div>
					</div>
				</div> -->
				<!-- 适用商户 end -->
				<!-- 适用商户参考三门小程序 -->
				<div class='whiteWrap' v-if="detailData.showType&&detailData.showType.indexOf('显示商家信息') !=-1">
					<div class="vendorWrap2">
						<div class="" v-if="queryVendorList.pkey">
							<div class="flex-between">
								<div class="text3">{{queryVendorList.name}}</div>
								<div class="flex-column flex-center" @click="handlePhone">
									<img object-fit="fill" class="icon3" src='@/assets/images/phone2.png'></img>
								</div>
							</div>
							<div class="text3" v-if="queryVendorList.businessTime">{{queryVendorList.businessTime}}</div>
							<div class="flex-between">
								<div class="text5">{{queryVendorList.addr}}</div>

								<div @click="openLocation(queryVendorList)" class="flex-column flex-center">
									<img object-fit="fill" class="icon2" src='@/assets/images/dh2.png'></img>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 适用商户参考三门小程序 end -->
				<!-- 购买须知 -->
				<div class='whiteWrap' v-if="detailData.tipsContent">
					<div class="gmxz flex-center">购买须知</div>
					<div v-html="detailData.tipsContent"></div>
				</div>
				<!-- 购买须知 end-->
				<!-- 商品详情 -->
				<div class='whiteWrap'>
					<div class="gmxz flex-center">商品详情</div>
					<div v-html="detailData.content"></div>
				</div>
				<!-- 商品详情 end-->
				<!-- 评价 -->
				<div class='whiteWrap'>
					<div class="evaluateWrap">
						<div class="flex-between">
							<div class="text1">评价<span class="text2">({{evaluateList.total}})</span></div>
							<div class="text2" @click="$router.push({path: '/coupon/evaluate',query: { pkey: $route.query.pkey }})">
								好评率{{detailData.applauseRate}}%
								<van-icon name="arrow" />
							</div>
						</div>
						<div class="flex-row item" v-for="(item,index) in evaluateList.content" :key="index">
							<img object-fit="fill" class="icon1" :src="item.memberPhoto?item.memberPhoto:require( '@/assets/images/no-pic.jpg')"></img>
							<div class="flex-column " style="flex:1">
								<div class="flex-between flex-alignCenter">
									<div class="name">{{item.memberName?item.memberName:'未知用户'}}</div>
									<div class="date">{{item.createdTime}}</div>
								</div>
								<div class="text3 flex-alignCenter">
									<van-rate readonly v-model="item.score" allow-half :icon="$store.state.rateIcon" :void-icon="$store.state.rateIcon2" />
									<span v-if="item.score == 5" style="margin-left:0.2rem">超赞</span>
								</div>
								<div class="content">
									{{item.content}}
								</div>
								<div class="imgWrap">
									<img v-for="(photoItem,photoIndex) in item.photo" :key="photoIndex" object-fit="fill" class="img" :src='photoItem'></img>
								</div>
								<div class="text4">
									已消费：{{item.goodsPaName}}
									<!-- {{item.price}} -->
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 评价 end-->
				<!-- 相关推荐 -->
				<div class='activity'>
					<div class="gmxz flex-center">为您推荐</div>
					<div class="type2 ">
						<div class="item flex-row" @click="goCouponDetail(goodsItem.pkey)" v-for="(goodsItem,goodsIndex) in bestGoods" :key="goodsIndex">
							<img object-fit="fill" :src="goodsItem.photo[0]"></img>
							<div style="flex:1">
								<div class="text1">{{goodsItem.name}}</div>
								<!-- <div class="flex-row flex-alignCenter">
									<div class="text3">{{goodsItem.applauseRate}}%好评</div>
									<div class="text4">已售{{goodsItem.xsNumTotal}}</div>
								</div> -->
								<div class="vipSuctract flex-row" v-if="goodsItem.vipDiscount">
									<div class="left">会员</div>
									<div class="right">立减{{goodsItem.vipDiscount}}元</div>
								</div>
								<div class="flex-between">
									<div class="flex-row flex-alignCenter">
										<div class="text2" v-if="goodsItem.priceAmt">
											<span style="font-size:0.24rem">￥</span>{{goodsItem.priceAmt}}
											<span class="minText2" v-if="!goodsItem.pricePv">起</span>
										</div>
										<div class="text2 flex-row flex-alignCenter" v-if="goodsItem.pricePv">
											<span style="margin:0 0.06rem" v-if="goodsItem.priceAmt&&goodsItem.pricePv">+</span>
											<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
											{{goodsItem.pricePv}}
											<span class="minText">起</span>
										</div>
									</div>
									<van-button class="button" @click.stop="goCouponDetail(goodsItem.pkey,'',detailData,referrer)">立即购买</van-button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 相关推荐 end -->
				<!-- 底部操作栏 -->
				<div class="bottom">
					<div class="flex-between">
						<div class="flex-between" style="flex: 1;padding: 0 0.4rem;">
							<div class="flex-column flex-center" @click="goHome">
								<img object-fit="fill" class="icon" src='@/assets/images/sy3.png'></img>
								<div class="text1">首页</div>
							</div>
							<div class="flex-column flex-center" @click="shareShow = true">
								<img object-fit="fill" class="icon" src='@/assets/images/fx.png'></img>
								<div class="text1">分享</div>
							</div>
							<div class="flex-column flex-center" @click="collect">
								<img object-fit="fill" class="icon" :src="detailData.isCollect?require('@/assets/images/sc.png'):require('@/assets/images/sc2.png')"></img>
								<div class="text1">收藏</div>
							</div>
						</div>
						<div class="flex-row flex-alignCenter">
							<van-button v-if="detailData.enabled&&detailData.priceStatus!='EXPIRED'" class="button3 " @click="goConfirmOrder($route.query.pkey,'',detailData,referrer)">
								<div class="flex-column flex-center">

									<div class="flex-row flex-alignCenter">
										<div class="text2" v-if="detailData.priceAmt">
											<span style="font-size:0.24rem">￥</span>{{detailData.priceAmt}}
										</div>
										<div class="text2 flex-row flex-alignCenter" v-if="detailData.pricePv">
											<span style="margin:0 0.06rem" v-if="detailData.priceAmt&&detailData.pricePv">+</span>
											<img object-fit="fill" class="jf" src="@/assets/images/jf.png"></img>
											{{detailData.pricePv}}
										</div>
									</div>
									<div>立即抢购</div>
								</div>
							</van-button>
							<van-button v-if="!detailData.enabled || detailData.priceStatus=='EXPIRED'" class="button4">
								<div>{{!detailData.enabled?'已下架':'抢购已结束'}}</div>
							</van-button>
						</div>
					</div>
				</div>
				<!-- 底部操作栏 end -->
			</div>
		</van-skeleton>
		<van-overlay :show="loadingShow">
			<div class="loading flex-center">
				<van-loading size="24px" vertical type="spinner" color="#fff">海报生成中</van-loading>
			</div>
		</van-overlay>

		<van-overlay :show="shareShow">
			<div class="shareWrap flex-center flex-column" @click.stop='shareShow = false'>
				<img object-fit="fill" class="img1" :src='shareImg'></img>
				<div class="buttonWrap flex-center flex-row">
					<div class="flex-center flex-column" @click.stop="shareTipClick(true)" style="margin-right: 1.9rem;">
						<img object-fit="fill" class="img2 " src='@/assets/images/fxhy.png'></img>
						<div>分享给好友</div>
					</div>
					<div class="flex-center flex-column" @click.stop="downLoad_shareImg">
						<img object-fit="fill" class="img2" src='@/assets/images/bctp.png'></img>
						<div>保存图片</div>
					</div>

				</div>
			</div>
		</van-overlay>
		<shareTip :show='shareTipShow' @shareTipHiden="shareTipClick(false)"></shareTip>
	</div>
</template>
<script>
import shareTip from '@/components/global/shareTip.vue';
export default {
	name: 'app',
	components: { shareTip },
	data() {
		return {
			shareTipShow: false,
			shareShow: false,
			loadingShow: false,
			imgUrls: ['/img/1.jpg', '/img/2.jpg', '/img/3.jpg', '/img/4.jpg'],
			groupShow: false,
			time: 24 * 60 * 60 * 1000,
			indicatorDots: false,
			autoplay: false,
			interval: 5000,
			duration: 1000,
			detailData: [],
			value: 2.5,
			rateIcon:
				'https://filetest.xinanshizu.com/file/v2/image?file=4235.png&code=00D96F02428C3AD8E53A3A6724AEC38C',
			rateIcon2:
				'https://filetest.xinanshizu.com/file/v2/image?file=4236.png&code=C993979E415E6C8ED7784EFD6C0AEAFE',
			bestGoods: [
				{
					photo: require('@/assets/images/no-pic.jpg'),
					name: '商品1',
					pv: 10,
					price: 100,
				},
				{
					photo: require('@/assets/images/no-pic.jpg'),
					name: '商品1',
					pv: 10,
					price: 100,
				},
				{
					photo: require('@/assets/images/no-pic.jpg'),
					name: '商品1',
					pv: 10,
					price: 100,
				},
				{
					photo: require('@/assets/images/no-pic.jpg'),
					name: '商品1',
					pv: 10,
					price: 100,
				},
				{
					photo: require('@/assets/images/no-pic.jpg'),
					name: '商品1',
					pv: 10,
					price: 100,
				},
			],
			islove: false,
			show2: false,
			queryVendorListTotal: 0,
			carts2: {},
			_product: '',
			cartsColor: [],
			cartsSize: [],
			colorSelect: {
				isplay: false,
				name: '未选颜色',
			},
			sizeSelect: {
				isplay: false,
				name: '未选尺码',
			},
			type: 1, //1加入购物车 2 立即购买 控制数量按钮的确认键跳转
			totalNum: 0,
			iscarts: true,
			cartnum: 1,
			cartsLenght: 0,
			show: false,
			num: 1, //选择的商品数量
			inPayTime: '',
			queryVendorList: {},
			bestGoods: [],
			evaluateList: [],
			payTime: false,
			videoSrc:
				'https://city-child.oss-cn-beijing.aliyuncs.com/file/productDetail/A3077D5235AC462CADBEED23A0EA4201.mp4',
			configData: {},
			shareImg: '',
			referrer: '',
		};
	},

	created() {
		if (this.$route.query.referrer) {
			this.referrer = this.$route.query.referrer;
		}
		this.get_goods();
		this.getConfig_index();
		this.queryTj_goods();
		this.queryAppAppraises_goods();
	},
	methods: {
		shareTipClick(b) {
			this.shareTipShow = b;
		},

		downLoad_shareImg() {
			this.$notify({ type: 'primary', message: '请长按图片保存本地' });
		},
		shareData() {
			var link =
				this.$store.state.shareUrl +
				'/coupon/detail?pkey=' +
				this.$route.query.pkey +
				'&referrer=' +
				this.$store.state.userinfo.pkey;
			var dataList = {
				title: '丰收联盟', // 分享标题
				desc: this.detailData.name, // 分享描述
				imgUrl: this.detailData.sharePhoto || this.detailData.photo[0], // 分享图标
			};
			console.log('');
			this.updateAppMessageShareData(dataList, link);
		},
		genPoster_share() {
			// if (this.shareImg) {
			// 	// 已生成海报
			// 	this.shareShow = true;
			// 	return;
			// }
			var params = {
				objPkey: this.$route.query.pkey,
				type: 'GOODS_CONSUMPTION',
			};
			// this.loadingShow = true;
			this.$myApi.genPoster_share(params).then((res) => {
				if (res.code == 0) {
					// this.loadingShow = false;
					this.shareImg = res.result;
				}
			});
		},
		queryAppAppraises_goods() {
			var params = {
				goodsPkey: this.$route.query.pkey,
				pagesize: 2,
			};
			this.$myApi.queryAppAppraises_goods(params).then((res) => {
				if (res.code == 0) {
					this.evaluateList = res.result;
				}
			});
		},
		queryTj_goods() {
			var params = {
				goodsId: this.$route.query.pkey,
			};
			this.$myApi.queryTj_goods(params).then((res) => {
				if (res.code == 0) {
					this.bestGoods = res.result;
				}
			});
		},
		/**
		 * 打电话
		 */
		handlePhone() {
			if (this.queryVendorList.mobile) {
				this.queryVendorList.mobile =
					this.queryVendorList.mobile.replace(' ', '');
				console.log(
					this.queryVendorList.mobile.replace(' ', '').length
				);
				this.$dialog
					.confirm({
						title: '是否拨打以下电话',
						message: this.queryVendorList.mobile,
					})
					.then(() => {
						window.location.href = `tel://${this.queryVendorList.mobile}`;
					})
					.catch(() => {});
			} else {
				this.$dialog
					.confirm({
						title: '提示',
						message: '商家未留有客服电话',
					})
					.then(() => {})
					.catch(() => {});
			}
		},
		collect() {
			var apiName = '';
			if (this.detailData.isCollect) {
				apiName = 'delCollect_goods';
			} else {
				apiName = 'addCollect_goods';
			}
			var params = {
				goodsPkey: this.$route.query.pkey,
			};
			this.$myApi[apiName](params).then((res) => {
				if (res.code == 0) {
					this.$notify({ type: 'success', message: '操作成功' });

					this.get_goods();
				} else {
				}
			});
		},
		goHome() {
			// console.log()
			this.$router.push({
				path: '/home',
				query: {},
			});
		},
		goCouponDetail(pkey) {
			// console.log()
			this.$router.push({
				path: '/coupon/detail',
				query: { pkey: pkey },
			});
			this.get_goods();
		},
		getConfig_index(pkey) {
			var params = {};
			this.$myApi.getConfig_index(params).then((res) => {
				if (res.code == 0) {
					this.configData = res.result;
				} else {
				}
			});
		},
		queryVendor_goods(pkey) {
			var params = {
				pkey: this.$route.query.pkey,
				page: 0,
				pagesize: 10,
				lat: this.$store.state.lat,
				lng: this.$store.state.lng,
			};
			this.$myApi.queryVendor_goods(params).then((res) => {
				if (res.code == 0) {
					if (res.result.content.length != 0) {
						this.queryVendorList = res.result.content[0];
					}
					this.queryVendorListTotal = res.result.total;
				} else {
				}
			});
		},
		get_goods(pkey) {
			var params = {
				pkey: this.$route.query.pkey,
			};
			this.$myApi.get_goods(params).then((res) => {
				if (res.code == 0) {
					if (res.result.endDate) {
						res.result.endDate = res.result.endDate.replace(
							/-/g,
							'/'
						);

						this.time = new Date(res.result.endDate) - new Date();
					}
					this.detailData = res.result;
					this.queryVendor_goods();
					this.shareData();
					this.genPoster_share();
				} else {
				}
			});
		},
	},
};
</script>
<style lang="less">
#couponDetail {
	padding-left: 0rem;
	padding-right: 0rem;
	min-height: 100vh;
	background-color: #fafafa;
	padding-bottom: 1.5rem;
	.jf {
		height: 0.2rem !important;
		width: 0.2rem !important;
		margin-right: 0.08rem !important;
		border-radius: 0 !important;
	}
	.jf2 {
		height: 0.2rem !important;
		width: 0.2rem !important;
		margin-right: 0.09rem !important;
		border-radius: 0 !important;
	}
	.vipSuctract2 {
		background: #222222;
		padding: 0.06rem 0.12rem;
		border-radius: 0px 50px 50px 50px;
		font-size: 0.18rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: #e1dacd;
		display: inline-block;
	}
	.vipTip {
		background: #fdfbef;
		padding: 0.22rem 0.18rem;
		margin-bottom: 0.2rem;
		font-size: 0.22rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 0.3rem;
		.hy {
			background: #40322f;
			color: #d7bda1;
			font-size: 0.1rem;
			padding: 0.05rem 0.1rem;
			border-radius: 5px;
			white-space: nowrap;
			margin-right: 0.1rem;
		}
	}
	.qun {
		margin-top: 0.3rem;
		.text1 {
			font-size: 0.28rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.text2 {
			font-size: 0.24rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
	.loading {
		height: 100vh;
		width: 100vw;
		position: fixed;
	}
	img {
		width: 100%;
	}
	.shareWrap {
		min-height: 100vh;
		min-width: 100vw;
		.img1 {
			width: 4.9rem;
			height: auto;
		}
		.buttonWrap {
			background: #fff;
			width: 7rem;
			border-radius: 10px;
			margin-top: 0.4rem;
			padding: 0.3rem 0;
			.img2 {
				width: 1rem;
				height: 1rem;
				margin-bottom: 0.1rem;
			}
		}
	}
	.bannerImg {
		height: 7.5rem;
		width: 100%;
	}
	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		// padding: 0.16rem 0.24rem;
		background: #fff;
		z-index: 2;
		.icon {
			width: 0.36rem;
			height: 0.36rem;
		}
		.text1 {
			font-size: 0.22rem;
			color: #333333;
		}
		.text2 {
			font-size: 0.32rem;
			color: #fff;
			margin-bottom: 0.1rem;
		}
	}
	.evaluateWrap {
		.text1 {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.text2 {
			font-size: 0.26rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.item {
			padding: 0.3rem 0;
			border-bottom: 1px solid #ededed;
			.icon1 {
				width: 0.72rem;
				height: 0.72rem;
				border-radius: 50%;
				margin-right: 0.18rem;
			}
			.name {
				font-size: 0.28rem;
				font-weight: bold;
				color: #333333;
				margin-bottom: 0.2rem;
			}
			.date {
				font-size: 0.24rem;
				color: #999999;
				margin-bottom: 0.2rem;
			}
			.text3 {
				font-size: 0.24rem;
				color: #d95954;
			}
			.icon2 {
				width: 0.24rem;
				height: 0.24rem;
			}
			.content {
				font-size: 0.28rem;
				color: #333333;
				line-height: 0.42rem;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.imgWrap {
				width: 100%;
				display: grid;
				grid-template-columns: repeat(3, 30%);
				grid-gap: 4%;
				.img {
					height: 1.8rem;
					width: 1.8rem;
				}
			}
			.text4 {
				background: rgba(255, 212, 49, 0.12);
				border-radius: 10px;
				font-size: 0.24rem;
				color: #d95954;
				margin-top: 0.16rem;
			}
		}
	}
	.vendorWrap {
		.text1 {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.text2 {
			font-size: 0.26rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		width: 100%;
		overflow-x: scroll;
		.icon1 {
			height: 1.14rem;
			width: 1.14rem;
			border-radius: 10px;
			margin-right: 0.24rem;
		}
		.icon2 {
			width: 0.32rem;
			height: 0.32rem;
			margin-bottom: 0.12rem;
		}
		.icon3 {
			width: 0.24rem;
			height: 0.3rem;
			margin-bottom: 0.12rem;
		}
		.text3 {
			font-size: 0.3rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 3rem;
			// margin-bottom: 0.1rem;
		}
		.text4 {
			font-size: 0.24rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999999;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			max-width: 1rem;
		}
		.text5 {
			font-size: 0.24rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999999;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			max-width: 2rem;
		}
	}
	.vendorWrap2 {
		.text1 {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.text2 {
			font-size: 0.26rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		width: 100%;
		overflow-x: scroll;
		.icon1 {
			height: 1.14rem;
			width: 1.14rem;
			border-radius: 10px;
			margin-right: 0.24rem;
		}
		.icon2 {
			width: 1.05rem;
			height: 0.4rem;
		}
		.icon3 {
			width: 1.05rem;
			height: 0.4rem;
			margin-bottom: 0.48rem;
		}
		.text3 {
			font-size: 0.32rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			max-width: 4rem;
			margin-bottom: 0.58rem;
		}
		.text4 {
			font-size: 0.24rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999999;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			max-width: 1rem;
		}
		.text5 {
			font-size: 0.28rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			max-width: 4rem;
		}
	}
	.groupWrap {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		.blockWrap {
			padding: 0.2rem;
			background: #fff;
			color: #000;
			img {
				height: 3rem;
				width: 3rem;
			}
		}
	}
	.whiteWrap {
		width: 7rem;
		padding: 0.24rem 0.16rem;
		margin-left: 0.25rem;
		background: #fff;
		position: relative;
		box-sizing: border-box;
		margin-top: 0.2rem;
		.title {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.gmxz {
			font-size: 0.34rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			// text-align: center;
			margin-bottom: 0.24rem;
			position: relative;
			z-index: 1;
		}
		.gmxz::before {
			content: '';
			width: 1.58rem;
			height: 0.12rem;
			background: #f3c978;
			border-radius: 10px;
			position: absolute;
			bottom: 0;
			z-index: -1;
		}
	}
	.specification {
		padding: 0.24rem;
		// min-height: 3.84rem;
		// max-height: 200px;
		position: relative;
		margin: 0 0.24rem;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10px;
		margin-top: 0.2rem;

		.text1 {
			font-size: 0.26rem;
			color: #333333;
			// font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.text2 {
			font-size: 0.24rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.type1 {
			width: 100%;
			overflow-x: scroll;
			img {
				height: 2rem;
				width: 2rem;
				border-radius: 10px;
			}
			.item {
				margin-right: 0.16rem;
				border-top: 1px solid #eee;
				padding-bottom: 0.2rem;
				.text3 {
					font-size: 0.26rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
					margin-top: 8px;
				}
				.text4 {
					margin-top: 8px;
					font-size: 0.32rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #d95954;
				}
				.text5 {
					margin-top: 8px;
					font-size: 0.24rem;
					color: #999;
					margin-right:0.2rem ;
				}
			}
		}
		.type2 {
			width: 100%;
			overflow-x: scroll;
			img {
				height: 1.8rem;
				width: 1.8rem;
				margin-right: 0.24rem;
				border-radius: 10px;
			}
			.item {
				margin-bottom: 8px;

				.text1 {
					font-size: 0.3rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.text2 {
					margin-top: 0.2rem;
					font-size: 0.3rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #d95954;
				}
				.text3 {
					background: rgba(255, 212, 49, 0.12);
					border-radius: 2px;
					font-size: 0.24rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #d95954;
					padding: 0.07rem 0.17rem;
					margin-right: 0.23rem;
				}
				.text4 {
					font-size: 0.22rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-right: 0.23rem;
				}
			}
		}
	}
	.activity {
		padding: 0.24rem;
		// min-height: 3.84rem;
		// max-height: 200px;
		position: relative;
		margin: 0 0.24rem;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10px;
		margin-top: 0.2rem;
		.gmxz {
			font-size: 0.34rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			// text-align: center;
			margin-bottom: 0.24rem;
			position: relative;
			z-index: 1;
		}
		.gmxz::before {
			content: '';
			width: 1.58rem;
			height: 0.12rem;
			background: #f3c978;
			border-radius: 10px;
			position: absolute;
			bottom: 0;
			z-index: -1;
		}
		.h {
			width: 0.2rem;
			height: 0.22rem;
			margin-right: 0.22rem;
		}
		.title {
			margin-left: -0.24rem;
			margin-bottom: 0.24rem;
			background: #eca73b;
			border-radius: 0 20px 20px 0;
			font-size: 0.24rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			padding: 0.1rem 0.4rem;
			padding-right: 0.57rem;
			padding-left: 0.1rem;
			width: 3rem;
		}
		.text1 {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.text2 {
			font-size: 0.24rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.type1 {
			width: 100%;
			overflow-x: scroll;
			img {
				height: 2rem;
				width: 2rem;
				border-radius: 10px;
			}
			.item {
				margin-right: 0.16rem;

				.text3 {
					font-size: 0.26rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					width: 100px;
					margin-top: 8px;
				}
				.text4 {
					margin-top: 8px;
					font-size: 0.26rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #d95954;
				}
			}
		}
		.type2 {
			width: 100%;
			overflow-x: scroll;
			img {
				height: 1.8rem;
				width: 1.8rem;
				margin-right: 0.24rem;
				border-radius: 10px;
			}
			.item {
				margin-bottom: 8px;

				.text1 {
					font-size: 0.3rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.text2 {
					margin-top: 0.2rem;
					font-size: 0.3rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #d95954;
				}
				.text3 {
					background: rgba(255, 212, 49, 0.12);
					border-radius: 2px;
					font-size: 0.24rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #d95954;
					padding: 0.07rem 0.17rem;
					margin-right: 0.23rem;
				}
				.text4 {
					font-size: 0.22rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-right: 0.23rem;
				}
			}
		}
	}
	.button {
		background: #eca73b;
		border-radius: 20px;
		font-size: 0.22rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		padding: 0.1rem 0.2rem;
		height: auto;
	}
	.button3 {
		background: #efa230;
		font-size: 0.26rem;
		font-family: PingFang SC;
		/* font-weight: bold; */
		color: #333;
		padding: 0.2rem 0.57rem;
		height: 100%;
		color: #fff;
		width: 3.75rem;
	}
	.button4 {
		background: gray;
		font-size: 0.26rem;
		font-family: PingFang SC;
		/* font-weight: bold; */
		color: #333;
		padding: 0.4rem 0.57rem;
		height: 100%;
		color: #fff;
		width: 5rem;
	}

	.button2 {
		.button();

		background: #5fc13e;
		color: #fff;
		padding: 0.12rem;
	}
	.productWrap {
		.name {
			font-size: 0.32rem;
			font-weight: bold;
			color: #000000;
			line-height: 0.44rem;
			margin-top: 0.2rem;
			margin-bottom: 0.32rem;
		}
		.text1 {
			font-size: 0.24rem;
			color: #d95954;
		}
		.text2 {
			font-size: 0.22rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.text3 {
			font-size: 0.22rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #c56164;
			background: #ffedeb;
			padding: 0.04rem 0.08rem;
			margin-right: 0.1rem;
		}
		.coupon {
			width: 100%;
			height: 0.64rem;
			background: rgba(255, 212, 49, 0.12);
			border-radius: 20px;
			font-size: 0.28rem;
			color: rgba(255, 102, 0, 1);
			padding: 0.16rem;
			.right {
				width: 0.09rem;
				height: 0.16rem;
				margin-left: 0.1rem;
			}
		}
	}
	.new_priceWrap3 {
		.priceBlock {
			// padding: 0.1rem 0.25rem;
			// background: #f8a446;
			// width: 100%;
			// border-radius: 0 10px 10px 0;
		}
		.text1 {
			font-size: 0.24rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
		.text2 {
			font-size: 0.42rem;
			font-weight: bold;
			color: #d95954;
			margin-bottom: 0.05rem;
		}
		.h {
			width: 0.24rem;
			height: 0.26rem;
			margin-right: 0.05rem;
		}
	}
	.new_priceWrap2 {
		position: relative;
		background: linear-gradient(90deg, #999999 0%, #cccccc 100%);
		height: 0.96rem;
		.priceImg {
			width: 100%;
			height: 100%;
		}

		.text {
			position: absolute;
			// right: 0.1rem;
			width: 100%;
			height: 100%;
			top: 0rem;
			padding: 0 0.25rem;

			.text1 {
				font-size: 0.48rem;
				font-weight: bold;
				color: #ffffff;
			}
			.text2 {
				font-size: 0.28rem;
				font-weight: bold;
				color: #ffffff;
			}
			.text3 {
				font-size: 0.22rem;
				color: #fff5ee;
				text-align: center;
				margin-bottom: 0.1rem;
			}
		}
	}
	.new_priceWrap {
		position: relative;
		// height: 0.96rem;
		background: #fef5e6;
		padding-right: 0.25rem;
		.colon {
			display: inline-block;
			margin: 0 0.1rem;
			font-size: 0.18rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.block {
			background: #f59f2b;
		}
		.priceBlock {
			padding: 0.1rem 0.25rem;
			background: #efa230;
			flex: 1;
			border-radius: 0 10px 10px 0;
		}
		.priceImg {
			width: 100%;
			height: 100%;
		}

		.text {
			// position: absolute;
			// right: 0.1rem;
			width: 100%;
			height: 100%;
			top: 0rem;
			// padding: 0 0.25rem;

			.text1 {
				font-size: 0.48rem;
				font-weight: bold;
				color: #ffffff;
			}
			.text2 {
				font-size: 0.4rem;
				font-weight: bold;
				color: #ffffff;
				margin-bottom: 0.05rem;
			}
			.text3 {
				font-size: 0.2rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				text-align: center;
			}
		}
	}
	.priceWrap2 {
		position: relative;
		background: linear-gradient(90deg, #999999 0%, #cccccc 100%);
		height: 0.96rem;
		.priceImg {
			width: 100%;
			height: 100%;
		}

		.text {
			position: absolute;
			// right: 0.1rem;
			width: 100%;
			height: 100%;
			top: 0rem;
			padding: 0 0.25rem;

			.text1 {
				font-size: 0.48rem;
				font-weight: bold;
				color: #ffffff;
			}
			.text2 {
				font-size: 0.28rem;
				font-weight: bold;
				color: #ffffff;
			}
			.text3 {
				font-size: 0.22rem;
				color: #fff5ee;
				text-align: center;
				margin-bottom: 0.1rem;
			}
		}
	}
	.priceWrap {
		position: relative;
		height: 0.96rem;
		.priceImg {
			width: 100%;
			height: 100%;
		}

		.text {
			position: absolute;
			// right: 0.1rem;
			width: 100%;
			height: 100%;
			top: 0rem;
			padding: 0 0.25rem;

			.text1 {
				font-size: 0.48rem;
				font-weight: bold;
				color: #ffffff;
			}
			.text2 {
				font-size: 0.28rem;
				font-weight: bold;
				color: #ffffff;
			}
			.text3 {
				font-size: 0.22rem;
				color: #fff5ee;
				text-align: center;
				margin-bottom: 0.1rem;
			}
		}
	}
}
</style>
<style lang="less" scoped>
.colon {
	display: inline-block;
	margin: 0 0.1rem;
	color: #ffffff;
}
.block {
	display: inline-block;
	width: 22px;
	font-size: 0.26rem;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	background-color: #ff672b;
}
.swipeWrap {
	position: relative;
	.user {
		// width: 3.78rem;
		height: 0.56rem;
		padding-right: 0.48rem;
		padding-left: 0.05rem;
		background: rgba(0, 0, 0, 0.55);
		border-radius: 0.28rem;
		position: absolute;
		top: 0.79rem;
		left: 0.29rem;
		z-index: 9999;
		font-size: 0.22rem;
		color: #ffffff;
		.head {
			width: 0.48rem !important;
			height: 0.48rem !important;
			background: #ffffff;
			border-radius: 50%;
		}
	}
	.like {
		padding: 0.15rem 0.22rem;
		background: rgba(0, 0, 0, 0.55);
		border-radius: 0.28rem 0rem 0rem 0.28rem;
		font-size: 0.22rem;
		color: #ffffff;
		position: absolute;
		top: 5.3rem;
		right: 0;
		z-index: 9999;
	}
}
/deep/.van-rate__icon {
	display: block;
	width: 0.24rem;
	color: #c8c9cc;
	font-size: 20px;
}
/deep/.van-icon__image {
	width: 0.24rem;
	height: 0.24rem;
	object-fit: contain;
}
/deep/.van-swipe-item {
	height: 7.5rem;
}
/deep/.van-search .van-cell {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	font-size: 0.28rem;
}
/deep/.van-tab {
	// flex: 0 1 auto;
	// width: 1rem;
	font-size: 0.3rem;
}
/deep/.van-tab--active {
	font-weight: bold;
	font-size: 0.32rem;
}
</style>
